<template>
<el-card>
  <el-input v-model="input2" style="width: 240px" placeholder="请输入要搜索的内容"  :prefix-icon="Search"/>
  <el-button type="primary" round style="margin: 5px 5px auto">搜索</el-button>
  <el-button type="info" round>重置</el-button>
</el-card>
  <el-card>
    <el-button type="primary" round>新增</el-button>
    <el-button type="success" round>删除</el-button>
    <el-button type="info" round>批量删除</el-button>
    <el-button type="warning" round>批量导入</el-button>
    <el-button type="danger" round>批量导出</el-button>
  </el-card>
  <el-card>

    <el-table :data="data.tableData" style="width: 100%" stripe>
      <el-table-column fixed prop="id" label="Id" width="150" />
      <el-table-column prop="name" label="姓名" width="120" />
      <el-table-column prop="sex" label="性别" width="120" />
      <el-table-column prop="age" label="年龄" width="120" />
      <el-table-column prop="address" label="地址" width="600" />
      <el-table-column prop="phone" label="手机号" width="120" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default>
          <el-button link type="primary" size="small">
            Detail
          </el-button>
          <el-button link type="primary" size="small">Edit</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-card>
      <div>

        <el-pagination
          v-model:current-page="data.currentPage4"
          v-model:page-size="data.pageSize4"
          :page-sizes="[10, 20, 30, 40]"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.tableData.length"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
  </el-card>



</template>

<script setup>

import { Search } from '@element-plus/icons-vue'
import {reactive} from 'vue'

const data = reactive({
  currentPage4:1,
  pageSize4:5,
  tableData: [
    {
      id: 1,
      name: '张三',
      sex: '男',
      age: 18,
      address: '北京市海淀区中关村',
      phone: '12345678901'
    },
    {
      id: 2,
      name: '李四',
      sex: '女',
      age: 19,
      address: '北京市海淀区中关村',
      phone: '12345678901'
    },
    {
      id: 3,
      name: '王五',
      sex: '男',
      age: 20,
      address: '北京市海淀区中关村',
      phone: '12345678901'
    },
    {
      id: 4,
      name: '赵六',
      sex: '男',
      age: 21,
      address: '北京市海淀区中关村',
      phone: '12345678901'
    },
  ]
 })

</script>